<!--
文件预览
@author luguoxiang
@Date: 2024/03/22 16:55
开源项目：https://gitee.com/lgx1992/lg-soar 求star！请给我star！请帮我点个star！
-->
<template>
  <teleport v-if="opened" to="body">
    <div class="lg-file-viewer" :style="{ width, height }">
      <viewer :files="innerFiles" :index="innerIndex" />
      <div v-drag class="lg-file-viewer-close" @click="close"><close-icon /></div>
    </div>
  </teleport>
</template>

<script>
import { CloseIcon } from 'tdesign-icons-vue-next';
import Viewer from './viewer.vue';

export default {
  name: 'LgFileViewer',
  components: { Viewer, CloseIcon },
  props: {
    files: Array,
    index: Number,
  },
  data() {
    return {
      opened: false,
      width: '0%',
      height: '0%',
      innerFiles: [],
      innerIndex: 0,
    };
  },
  methods: {
    close() {
      this.width = '0%';
      this.height = '0%';
      this.$nextTick(() => {
        setTimeout(() => {
          this.opened = false;
        }, 200);
      });
    },
    open({ files, index }) {
      this.innerFiles = [];
      this.innerIndex = [];
      this.opened = true;
      this.$nextTick(() => {
        setTimeout(() => {
          this.width = '100%';
          this.height = '100%';
        }, 10);
        setTimeout(() => {
          this.innerFiles = files || this.files || [];
          this.innerIndex = index || this.index || 0;
        }, 200);
      });
    },
  },
};
</script>
<style lang="less" scoped>
.lg-file-viewer {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  background-color: #0000007f;
  transition: 200ms;
  overflow: hidden;
  .lg-file-viewer-close {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 10000;
    border-radius: 50%;
    background-color: #000000bf;
    font-size: 30px;
    color: #fff;
    cursor: pointer;
    &:hover {
      background-color: #000000;
    }
  }
}
</style>
